@charset "utf-8";
$aa:24px;
@mixin seriesstyle{
    box-sizing: border-box;
    font-size: $aa;
    line-height: $aa;
    text-align: center;
    padding-top: 36px;
    transition-property: color background-color; 
    transition: 1s;
}
@keyframes series-pic{
    0%{
        width: 0;
        height: 0;
    }
    100%{
        width: 29px;
        height: 29px;
    }
}
//产品页

.bigpic{
    width: 100%;
    height: 220px;
    overflow: hidden;
    img{
        width: 100%;
    }
}
.product-content{
    box-sizing: border-box;
    height: 1510px;
    width: 100%;
    background: #f6f6f6;
    .product-top{
        box-sizing: border-box;
        height: 68px;
        width: 980px;
        margin: 0 auto;
        padding-top: 22px;
        padding-left: 10px;
        p{
            font-size: 12px;
            color: #5e5e5e;
            a{
                color: #5e5e5e;
            }
            a:hover{
                color: red;
            }
        }
    }
    .product-series{
        height: 129px;
        width: 980px;
        margin: 0 auto;
        
        .series-pic{
            width: 29px;
            height: 29px;
            margin: 10px auto 0;
            overflow: hidden;
            img{
                width: 100%;
            }
        }
        .series1{
            width: 292px;
            height: 129px;
            margin-left: 7px;
            @include seriesstyle;
        }
        .series2{
            width: 207px;
            height: 129px;
            margin-left: 5px;
            @include seriesstyle;
        }
        .series3{
            width: 233px;
            height: 129px;
            margin-left: 5px;
            @include seriesstyle;
        }
        .series4{
            width: 222px;
            height: 129px;  
            margin-left: 5px;
            @include seriesstyle;
        }
        .seriesnormal{
            background: #cac9c9;
            color: black;
            .series-pic{
                display: none;
                
            }
        }
        .seriesactive,.seriesnormal:hover{
            background: #2072f9;
            color: #FFFFFF;
            
            .series-pic{
                display: block;
                animation: series-pic 0.5s;
            }
            
        }
    }
    .product-search{
        height: 105px;
        width: 980px;
        margin: 0 auto;
        position: relative;
        .product-search-box{
            width: 358px;
            height: 50px;
            box-sizing: border-box;
//          border: 1px solid #434343;
            position: absolute;
            top: 29px;
            right: 5px;
            #product-search{
                box-sizing: border-box;
                width: 300px;
                height: 50px;
                border: 1px solid #434343;
//              border: none;
                font-size: 18px;
                line-height: 40px;
                padding-left: 6px;
            }
            #product-search:focus{
                border: 1px solid orangered;
            }
            .search-bg{
                box-sizing: border-box;
                width: 56px;
                height: 50px;
                background: #434343;
                padding-top: 10px;
                padding-left: 15px;
            }
            .search-bg:active{
                background: orangered;
            }
        }
        
    }
    .product-box{
        box-sizing: border-box;
        width: 976px;
        height: 906px;
        margin: 0 auto;
        .product-itemlist{
            box-sizing: border-box;
            width: 974px;
            height: 800px;
            border: 1px #dcdcdc solid;
            
            a:hover .product-item{
                transform: translateY(-5px);
//              border: solid blue 1px;
                box-shadow: #999999 0 1px,#aaaaaa 0 2px,#bbbbbb 0 3px,#cccccc 0 4px;
            }
            
            .product-item{
                box-sizing: border-box;
                width: 324px;
                height: 266px;
                border-right: #dcdcdc 1px solid;
                border-bottom: #c9c9c9 1px solid;
                float: left;
                text-align: center;
                background: #FFFFFF;
                transition: 1s;
                .product-pic{
                    box-sizing: border-box;
                    height: 187px;
                    width: 324px;
                    padding-top: 30px;
                    img{
                        margin: 0 auto;
                    }
                }
                p:first-of-type{
                    font-size: 16px;
                    line-height: 16px;
                    color: #2072f9;
                    margin-bottom: 20px;
                }
                p~p{
                    font-size: 12px;
                    line-height: 12px;
                    color: #3e3e3e;
                    font-weight: bold;
                }
            }
            a:nth-of-type(-n+2) .product-pic{
                padding-top: 17px;
            }
            .product-item:nth-of-type(3n){
                border-right: none;
            }
        }
        .product-link{
            height: 48px;
            width: 552px;
            margin: 54px auto 0;
            p{
                transition: 1s;
            }
            a{
                font-size: 16px;
                line-height: 48px;
                color: #6b6a6a;
                text-align: center;
            }
            p.link-active,p:hover{
                background: #2072f9;
                color: #FFFFFF;
            }
            .link-prev{
                width: 77px;
                height: 48px;
                margin-right: 19px;
                float: left;
            }
            .link-number{
                width: 360px;
                height: 48px;
                float: left;
                p{
                    width: 60px;
                    height: 48px;
                    float: left;
                    display: block;
                }
            }
            .link-next{
                width: 77px;
                height: 48px;
                margin-left: 19px;
                float: left;
            }
        }
    }
}
